JavaScript Tasarım Desenleri: Singleton, Observer ve Factory Uygulamaları

Tasarım desenleri, yazılım tasarımında sıkça karşılaşılan problemlere yönelik yeniden kullanılabilir çözümlerdir. Zamanla öğrenilmiş en iyi pratikleri temsil ederler ve JavaScript uygulamalarınızın yapısını, sürdürülebilirliğini ve ölçeklenebilirliğini önemli ölçüde iyileştirebilirler. Bu makale, üç temel tasarım desenini ele almaktadır: Singleton, Observer ve Factory, pratik uygulamalar ve gerçek dünya örnekleri sunarak.

Tasarım Desenlerini Anlamak

Belirli desenlere dalmadan önce, tasarım desenlerinin neden değerli olduğunu anlamak önemlidir. Birkaç avantaj sunarlar:

• Yeniden Kullanılabilirlik: Tasarım desenleri, farklı problemlere uygulanabilen, denenmiş ve test edilmiş çözümlerdir.
• Sürdürülebilirlik: Yerleşik desenleri takip etmek, daha organize ve öngörülebilir bir kod yapısına yol açar, bu da kodu anlamayı ve değiştirmeyi kolaylaştırır.
• Ölçeklenebilirlik: Tasarım desenleri, uygulamanızı hantal hale gelmeden büyümesine ve gelişmesine olanak tanıyacak şekilde yapılandırmanıza yardımcı olabilir.
• İletişim: Tasarım desenlerini kullanmak, geliştiriciler için ortak bir kelime dağarcığı sağlar, bu da tasarım fikirlerini iletmeyi ve etkili bir şekilde işbirliği yapmayı kolaylaştırır.

Singleton Deseni

Singleton deseni, bir sınıfın yalnızca bir örneğe sahip olmasını sağlar ve ona global bir erişim noktası sunar. Bu, belirli bir kaynağın oluşturulmasını kontrol etmeniz ve uygulamanız boyunca yalnızca bir örneğin kullanılmasını sağlamanız gerektiğinde kullanışlıdır. Bunu global bir yapılandırma nesnesi veya bir veritabanı bağlantı havuzu gibi düşünebilirsiniz.

Uygulama

İşte Singleton deseninin temel bir JavaScript uygulaması:

            
let instance = null;

class Singleton {
  constructor() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }

  static getInstance() {
    if (!instance) {
      instance = new Singleton();
    }
    return instance;
  }

  // Add your methods and properties here
  getData() {
    return "Singleton data";
  }
}

// Example Usage
const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

console.log(singleton1 === singleton2); // Output: true
console.log(singleton1.getData()); // Output: Singleton data

            

              
                Copy
              
            
          

Açıklama:

• instance değişkeni, sınıfın tek örneğini tutar.
• constructor, bir örneğin zaten var olup olmadığını kontrol eder. Eğer varsa, mevcut örneği döndürür; aksi takdirde, yeni bir tane oluşturur.
• getInstance() metodu, örneğe global bir erişim noktası sağlar.

Gerçek Dünya Kullanım Örnekleri

• Yapılandırma Yönetimi: Bir Singleton, uygulama genelindeki yapılandırma ayarlarını saklayarak farklı modüller arasında tutarlı erişim sağlayabilir. Tek ve tutarlı bir yapılandırma dosyasından okuma yapması gereken bir uygulama düşünün. Bir Singleton, dosyanın yalnızca bir kez okunmasını ve uygulamanın tüm bölümlerinin aynı ayarları kullanmasını sağlar.
• Loglama: Bir Singleton logger, tüm loglama faaliyetlerini merkezileştirerek uygulama davranışını izlemeyi ve analiz etmeyi kolaylaştırabilir. Bu, birden fazla logger örneğinin aynı dosyaya aynı anda yazmasını ve potansiyel olarak veri bozulmasına neden olmasını önler.
• Veritabanı Bağlantı Havuzu: Bir Singleton, bir veritabanı bağlantı havuzunu yöneterek kaynak kullanımını optimize edebilir ve performansı artırabilir. Bu, her veritabanı etkileşimi için yeni bağlantılar oluşturma yükünü ortadan kaldırır.

Avantajları

• Tek bir örneğe kontrollü erişim.
• Kaynak optimizasyonu.
• Global erişim noktası.

Dezavantajları

• Global durum (state) nedeniyle test yapmayı zorlaştırabilir.
• Eğer Singleton sınıfı kendi örneğini yönetmekten daha fazlasını yaparsa Tek Sorumluluk Prensibi'ni ihlal eder.

Observer Deseni

Observer deseni, nesneler arasında bire çok bir bağımlılık tanımlar, böylece bir nesne (subject/konu) durum değiştirdiğinde, tüm bağımlıları (observer/gözlemciler) otomatik olarak bilgilendirilir ve güncellenir. Bu, nesnelerin birbirine sıkı sıkıya bağlı olmadan diğer nesnelerdeki değişikliklere tepki verebildiği, gevşek bağlı sistemler oluşturmak için kullanışlıdır. Hisse senedi fiyatı değiştiğinde tüm izleyicilerini güncelleyen bir borsa ekranını düşünün.

Uygulama

İşte Observer deseninin bir JavaScript uygulaması:

            
class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received update: ${data}`);
  }
}

// Example Usage
const subject = new Subject();

const observer1 = new Observer("Observer 1");
const observer2 = new Observer("Observer 2");

subject.subscribe(observer1);
subject.subscribe(observer2);

subject.notify("New data available!");

subject.unsubscribe(observer2);

subject.notify("Another update!");

            

              
                Copy
              
            
          

Açıklama:

• Subject sınıfı, gözlemcilerin bir listesini tutar.
• subscribe() metodu, listeye bir gözlemci ekler.
• unsubscribe() metodu, listeden bir gözlemciyi kaldırır.
• notify() metodu, gözlemciler arasında dolaşır ve onların update() metodunu ilgili veriyle çağırır.
• Observer sınıfı, konu'nun (subject) durumu değiştiğinde çağrılan update() metodunu tanımlar.

Gerçek Dünya Kullanım Örnekleri

• Olay Yönetimi (Event Handling): Observer deseni, tarayıcı olayları (örneğin, tıklama, fareyle üzerine gelme) ve web uygulamalarındaki özel olaylar gibi olay yönetimi sistemlerinde yaygın olarak kullanılır. Bir düğmeye tıklanması (Subject), kayıtlı tüm olay dinleyicilerini (Observer'lar) bilgilendirir.
• Gerçek Zamanlı Güncellemeler: Sohbet uygulamaları veya borsa ekranları gibi gerçek zamanlı güncelleme gerektiren uygulamalarda, Observer deseni yeni veri geldiğinde istemcileri bilgilendirmek için kullanılabilir. Sunucu (Subject), yeni bir mesaj alındığında bağlı tüm istemcileri (Observer'lar) bilgilendirir.
• Model-View-Controller (MVC): MVC mimarilerinde, Observer deseni model değiştiğinde view'leri (görünümleri) bilgilendirmek için kullanılır. Model (Subject), veri güncellendiğinde View'i (Observer) bilgilendirir.

Avantajları

• Konu (subject) ve gözlemciler (observer) arasında gevşek bağlılık.
• Yayın (broadcast) iletişimine destek.
• Nesneler arasında dinamik ilişki.

Dezavantajları

• Dikkatli yönetilmezse beklenmedik güncellemelere yol açabilir.
• Güncelleme akışını izlemek zor olabilir.

Factory Deseni

Factory deseni, bir üst sınıfta (superclass) nesne oluşturmak için bir arayüz sağlar, ancak alt sınıfların (subclass) oluşturulacak nesnelerin türünü değiştirmesine olanak tanır. Bu, istemci kodunu somutlaştırılan belirli sınıflardan ayırır ve istemci kodunu değiştirmeden farklı uygulamalar arasında geçiş yapmayı kolaylaştırır. Kullanıcı girdisine göre farklı türde araçlar (arabalar, kamyonlar, motosikletler) oluşturmanız gereken bir senaryo düşünün.

Uygulama

İşte Factory deseninin bir JavaScript uygulaması:

            
// Abstract Product
class Vehicle {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  getDescription() {
    return `This is a ${this.model} made in ${this.year}.`;
  }
}

// Concrete Products
class Car extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Car";
  }
}

class Truck extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Truck";
  }
  getDescription() {
      return `This is a ${this.type} ${this.model} made in ${this.year}. It's very strong!`;
  }
}

class Motorcycle extends Vehicle {
  constructor(model, year) {
    super(model, year);
    this.type = "Motorcycle";
  }
}

// Factory
class VehicleFactory {
  createVehicle(type, model, year) {
    switch (type) {
      case "car":
        return new Car(model, year);
      case "truck":
        return new Truck(model, year);
      case "motorcycle":
        return new Motorcycle(model, year);
      default:
        return null;
    }
  }
}

// Example Usage
const factory = new VehicleFactory();

const car = factory.createVehicle("car", "Toyota Camry", 2023);
const truck = factory.createVehicle("truck", "Ford F-150", 2022);
const motorcycle = factory.createVehicle("motorcycle", "Honda CBR", 2024);

console.log(car.getDescription()); // Output: This is a Toyota Camry made in 2023.
console.log(truck.getDescription()); // Output: This is a Truck Ford F-150 made in 2022. It's very strong!
console.log(motorcycle.getDescription()); // Output: This is a Honda CBR made in 2024.

            

              
                Copy
              
            
          

Açıklama:

• Vehicle sınıfı, tüm araç türleri için ortak arayüzü tanımlayan soyut bir üründür.
• Car, Truck ve Motorcycle sınıfları, Vehicle arayüzünü uygulayan somut ürünlerdir.
• VehicleFactory sınıfı, belirtilen türe göre somut ürünlerin örneklerini oluşturan fabrikadır.
• createVehicle() metodu, tür, model ve yıl argümanlarını alır ve ilgili araç sınıfının bir örneğini döndürür.

Gerçek Dünya Kullanım Örnekleri

• UI Framework'leri: UI framework'leri, düğmeler, metin alanları ve açılır menüler gibi farklı türde UI öğeleri oluşturmak için genellikle Factory desenini kullanır. React, Vue ve Angular bileşen kütüphaneleri, bileşenleri somutlaştırmak için genellikle fabrika benzeri desenler kullanır.
• Oyun Geliştirme: Oyun geliştirmede, Factory deseni düşmanlar, silahlar ve güçlendirmeler gibi farklı türde oyun nesneleri oluşturmak için kullanılabilir. Bir fabrika, oyun zorluk seviyesine göre farklı türde yapay zeka rakipleri oluşturmak için kullanılabilir.
• Veri Erişim Katmanları: Factory deseni, veritabanı bağlantıları ve API istemcileri gibi farklı türde veri erişim nesneleri oluşturmak için kullanılabilir. Bir fabrika, farklı veritabanı sistemlerine (örneğin, MySQL, PostgreSQL, MongoDB) bağlantılar oluşturmak için kullanılabilir.

Avantajları

• İstemci kodunun somut sınıflardan ayrılması.
• Geliştirilmiş kod organizasyonu ve sürdürülebilirlik.
• Farklı uygulamalar arasında geçiş yapma esnekliği.

Dezavantajları

• Kod tabanına karmaşıklık ekleyebilir.
• Daha fazla başlangıç kurulumu gerektirebilir.

Sonuç

Singleton, Observer ve Factory desenleri, JavaScript geliştiricilerinin kullanabileceği birçok tasarım deseninden sadece birkaçıdır. Bu desenleri anlayarak ve uygulayarak daha temiz, daha sürdürülebilir ve ölçeklenebilir kod yazabilirsiniz. Bu desenleri kendi projelerinizde deneyin ve yazılım geliştirme becerilerinizi daha da geliştirmek için diğer tasarım desenlerini keşfedin. Unutmayın ki tasarım desenleri akıllıca kullanılması gereken araçlardır ve her sorun bir tasarım deseni çözümü gerektirmez. Doğru durum için doğru deseni seçin ve her zaman açık, öz ve anlaşılması kolay kod yazmaya çalışın.

Tasarım desenlerini sürekli olarak öğrenmek ve geliştirme iş akışınıza uyarlamak, kodunuzun kalitesini ve herhangi bir global projede karmaşık yazılım zorluklarının üstesinden gelme yeteneğinizi önemli ölçüde artıracaktır.